<template>
	<view class="bg-white full-page">
		<form>
			<cu-custom bgColor="bg-gradual-blue" showBackIcon>
				<block slot="content">雅信达
				</block>
			</cu-custom>
		</form>

		<scroll-view scroll-y style="height:calc(100vh - 100px - 72px);">
			<view class="cu-bar bg-white solid-bottom ">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 我的工单
				</view>
			</view>

			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in list" :key="index" @click="setCurrentOrder(item)">

					<view class="content" style="left:20px">
						<view class="text-grey text-bold">{{item.user_name}} {{item.phone}}</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-locationfill text-red  margin-right-xs"></text> {{item.address}}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.create_time}}</view>
						<view class="cu-tag round bg-grey sm">{{item.statusText}}</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="padding">
				<button class="cu-btn block bg-gradual-blue lg" @click="toDetail()">
					<text class="cuIcon-upload"></text> 添加</button>
			</view -->
		</scroll-view>


		<view class="safe-area botton-nav">
			<view style="width: 50%;height:38px;line-height: 38px;" class="bg-gradual-blue text-white text-bold"><text
					class="cuIcon-homefill margin-right-xs"></text>首页</view>
			<view @click="toUcenter()" style="width: 50%;height:38px;line-height: 38px;background-color:#F2F2F2;"><text
					class="cuIcon-myfill margin-right-xs"></text>我的</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="loginView">
				<view class="loginTitle" style="">授权获取个人信息</view>
				<image src="../../static/wxProgram.png"></image>
				<view>申请获取您微信的头像、昵称！</view>
				<button class='cu-btn bg-green shadow' @click="wxGetUserInfo">授权登录</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const STATUS = ['待受理', '处理中', '已完成', '已拒绝', '挂起']
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import dateFormatUtils from '../../utils/utils.js'

	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				page: 1,
				limit: 20,
				list: [],
				userInfo: null,
				modalName: ""
			};
		},
		onShareAppMessage: function() {

		},
		methods: {
			setCurrentOrder(item) {
				uni.setStorageSync('currentOrder', item);
				uni.navigateTo({
					url: '/pages/index/details'
				})
			},
			loadmore() {
				this.page++;
				this.get_orders()
			},
			toUcenter() {
				uni.redirectTo({
					url: '/pages/index/ucenter'
				})
			},
			toDetail() {
				uni.removeStorageSync('currentOrder');
				uni.navigateTo({
					url: '/pages/index/details'
				})
			},
			get_orders() {
				let _this = this;
				let para = {
					page: this.page,
					limit: this.limit
				}
				_this.$http.get('/app/order', {}, (res) => {
					if (res.data.code == 20000) {
						_this.list = _this.list.concat(res.data.items);
						_this.list.forEach(ele => {
							ele.statusText = STATUS[ele.status]
						})
					}
				});
			},
			wxGetUserInfo() {
				var _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						//如果用户点击了确定按钮
						if (res.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								lang: 'zh_CN',
								success: res => {
									_this.userInfo = res.userInfo;
									_this.login();
									uni.setStorageSync('userInfo', _this.userInfo);
								},
								fail: res => {
									//拒绝授权
									wx.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				})

			},
			openDialogs: function() {
				this.$refs.popup.open()
			},
			login() {
				let _this = this;
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						_this.getUserToken(code);
					},
				});
			},
			getInfo() {
				var _this = this;
				var para = {}
				_this.$http.get('app/app_user', {
					data: para
				}, (res) => {
					if (res.data.code == 20000) {
						let info = res.data.info
						uni.setStorageSync('userInfo', info);
						_this.userInfo = info
					} else if (res.data.code == 40001 || res.statusCode == 401) {
						_this.openDialogs()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			},
			getUserToken(code) {
				let _this = this;
				console.log('开始向服务器获取登录信息！');
				_this.$http.get('app/app_user/login', {
					data: {
						code: code,
					}
				}, (res) => {
					if (res.data.code == 20000) {
						//说明是没获取到授权 , 需要获取用户信息上次

						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', res.data.item);

						_this.uploadUserInfo();
						_this.$refs.popup.close() //隐藏弹窗
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			},
			//将userInfo传给后台
			uploadUserInfo() {
				let _this = this;
				console.log(_this.userInfo)
				let userInfoToSend = Object.assign({}, _this.userInfo);
				delete userInfoToSend.nickName;
				delete userInfoToSend.phone;
				_this.$http.post('app/app_user/upload_info', {
					// user_info: _this.userInfo,
					user_info: userInfoToSend,
				}, (res) => {
					if (res.data.code == 20000) {
						//说明是没获取到授权 , 需要获取用户信息上次
						console.log("上传用户信息成功!");
						// _this.getFiled()
						// uni.reLaunch({
						// 	url:'/pages/my/index'
						// })
						// _this.modalName = 'phoneModal';
					} else {
						console.log("上传用户信息失败!");
						uni.showToast({
							title: '出错了，请重新授权！',
							icon: 'none',
							complete() {
								setTimeout(() => {
									_this.openDialogs()
								}, 1 * 1000)
							}
						})
					}
				});
			},
			checkToken() {
				let _this = this;
				if (!_this.isLogin) {
					_this.openDialogs()
					return
				} else {
					_this.getInfo()
				}
				uni.checkSession({
					fail() {
						_this.openDialogs()
						return
					}
				})
			}
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync("userInfo")
			if (this.userInfo) {
				this.get_orders()
			}
		},
		onShareAppMessage: function() {

		}
	}
</script>


<style lang="scss">
	.action {
		width: 200rpx !important;
	}

	.botton-nav {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100vw;
		text-align: center;
	}

	.safe-area {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.loginView {
		text-align: center;
		width: 300px;
		border-radius: 8px;
		background-color: white;
	}

	.loginView image {
		margin: 8px;
		width: 50px;
		height: 50px;
	}

	.loginView button {
		width: 250px;
		height: 45px;
		margin: 10px;
		border-radius: 20px;
	}

	.loginView .loginTitle {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid lightgrey;
	}
</style>